<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: JunyaoPan
 * @LastEditTime: 2021-09-22 11:04:16
-->
<template>
  <div id="container" style="height:200px"></div>
</template>
<script>
import { Area } from '@antv/g2plot';
export default {
  mounted() {
    fetch(
      "https://gw.alipayobjects.com/os/bmw-prod/360c3eae-0c73-46f0-a982-4746a6095010.json"
    )
      .then((res) => res.json())
      .then((data) => {
        const area = new Area("container", {
          data,
          xField: "timePeriod",
          yField: "value",
          xAxis: {
            range: [0, 1],
          },
        });
        area.render();
      });
  },
};
</script>

<style lang="scss" scoped>
</style>